<template>
	<view class="page-container">
		<u-sticky>
			<common-head :autoBack="true" title="二轮延保摸底调查"></common-head>
			<rh-tabs :list="tabList" :current="currentTab.idx" @change-tab="changeTab"></rh-tabs>
		</u-sticky>
		<view class="list-container">
			<rh-no-content v-if="!currentTab.list.length"></rh-no-content>
			<view :class="['item', `item-${currentTab.key}`]" 
			v-for="(item, index) in currentTab.list" 
			:key="index" @click="toUpdate(item)">
				<template v-if="currentTab.key == 'cbf'">
					<view class="item-head flex-between">
						<view class="label-txt">{{item.cbfmc}}</view>
						<view :class="['head-status flex-center', item.elybCbfid && 'success']">
							<text class="status-txt">{{item.elybCbfid ? '已确认' : '未确认'}}</text>
						</view>
					</view>
					<view class="row flex-between">
						<text class="col">性别：{{item.cbfxb | num2Str('elyb_sex', dictsList)}}</text>
						<text class="col">与户主关系： {{item.yhzgx | num2Str('elyb_yhzgx', dictsList)}}</text>
					</view>
				</template>
				<template v-if="currentTab.key == 'cbdk'">
					<view class="item-head flex-between">
						<view class="label-txt">{{item.dkmc}}</view>
						<view :class="['head-status flex-center', item.elybCbdkid && 'success']">
							<text class="status-txt">{{item.elybCbdkid ? '已确认' : '未确认'}}</text>
						</view>
					</view>
					<view class="row flex-between">
						<text class="col">确权面积：{{item.htmjm}} / 亩</text>
						<text class="col">是否共有地块： {{item.sfqqqg | num2Str('elyb_yesno', dictsList)}}</text>
					</view>
				</template>
				<template v-if="currentTab.key == 'cbjf'">
					<view class="item-head flex-between">
						<view class="label-txt">{{item.jflx | num2Str('elyb_jflx', dictsList)}}</view>
						<view :class="['head-status flex-center', 'success']">
							<text class="status-txt">已上报</text>
						</view>
					</view>
					<view class="row flex-column">
						<text class="col-txt">纠纷简要说明</text>
						<text class="col">{{item.jfsm}}</text>
					</view>
				</template>
			</view>
		</view>
		<view class="bottom-btn-container flex-normal">
			<view class="btn-item save-btn flex-center" @click="saveLoginOut">
				<text class="btn-txt">保存并退出</text>
			</view>
			<view class="btn-item submit-btn flex-center" 
			@click="submit">
				<text class="btn-txt">提交</text>
			</view>
		</view>
		<rh-add-btn v-if="currentTab.hasAddBtn" @jump="createItem"></rh-add-btn>
		<rh-modal title="提示" :warningTxt="other.warningTxt" 
		 ref="warning-modal"
		 @rh-confirm="confirm"></rh-modal>
	</view>
</template>

<script>
	import { confirmAll } from '@/script/api/common/index.js'
	import { listCbf } from '@/script/api/rkxx/index.js' //人口
	import { listCbdk } from '@/script/api/cbdk/index.js' // 承包地块
	import { listCbjf } from '@/script/api/cbjf/index.js' // 纠纷上报
	import { queryParams } from '@/script/tools.js'
	let TABLIST = [
		{key: 'cbf', idx: 0, name: "人口信息", list: [], hasAddBtn: true, hasDetail: true},
		{key: 'cbdk', idx: 1, name: "承包地信息", list: [], hasAddBtn: false, hasDetail: true},
		{key: 'cbjf', idx: 2, name: "纠纷上报", list: [], hasAddBtn: true, hasDetail: false},
		{key: 'cbf2', idx: 3, name: "申请分户", list: [], hasAddBtn: false, hasDetail: false}
	]
	export default {
		name: "list",
		data() {
			return {
				tabList: TABLIST,
				currentTab: TABLIST[0],
				boo: {
					isSubmit: false
				},
				other: {
					warningTxt: '',
					action: ''
				},
				dictsList: [
					// 数据字典
					{
						label: "纠纷类型",
						name: "elyb_jflx",
						child: []
					},
					{
						label: "性别",
						name: "elyb_sex",
						child: []
					},
					{
						label: "与户主关系",
						name: "elyb_yhzgx",
						child: []
					},
					{
						label: "是否",
						name: "elyb_yesno",
						child: []
					},
				],
			};
		},
		filters: {
			num2Str(num, name, list) {
			  let dict = list.find((i) => i.name == name);
			  if (!dict) return "--";
			  let item = dict["child"].find((i) => i.dictValue == num);
			  if (!item) return "---";
			  return item["dictLabel"];
			},
		},
		onShow(){
			this.initPage()
		},
		created(){
			let _self = this
			this.initGetDicts()
			_self.currentTab = _self.tabList[0]
		},
		methods: {
			initPage(){
				let _self = this
				_self.tabList.forEach(tab => {
					_self.getList(tab)
				})
			},
			changeTab(tab){
				let _self = this
				_self.currentTab = tab
			},
			// 已启用状态的列表数据
			getList(tab) {
				let _self = this
				if(tab.key == 'cbf'){
					listCbf().then(res => {
						_self.$set(tab, 'list', res.data || [])
					})
				}else if(tab.key == 'cbdk'){
					listCbdk().then(res => {
						_self.$set(tab, 'list', res.data || [])
					})
				}else if(tab.key == 'cbjf'){
					listCbjf().then(res => {
						_self.$set(tab, 'list', res.data || [])
					})
				}
			},
			submit(){
				let _self = this, list = []
				let vmodal = _self.$refs['warning-modal']
				if(_self.boo.isSubmit) return _self.$attention.noIcon('正在处理请稍后')
				_self.boo.isSubmit = true
				confirmAll().then(res => {
					_self.$attention.noIcon('数据提交成功')
				}).finally(() => {
					_self.boo.isSubmit = false
				})
			},
			saveLoginOut(){
				let _self = this
				let vmodal = _self.$refs['warning-modal']
				_self.other.warningTxt = '此操作将退出登录'
				_self.other.action = 'saveLoginOut'
				vmodal.showModal = true
			},
			confirm(){
				let _self = this, {action} = this.other
				let vmodal = _self.$refs['warning-modal']
				if(action == 'saveLoginOut'){
					uni.clearStorage()
					uni.reLaunch({
						url: '/pages/home'
					})
				}
				vmodal.showModal = false
			},
			createItem(){
				let _self = this, {key, hasAddBtn} = this.currentTab
				let path = `/pages/appMain/add-${key}`
				if(!hasAddBtn) return
				uni.navigateTo({
					url: path
				})
			},
			toUpdate(item){
				let _self = this, {key, hasDetail} = this.currentTab
				let path = `/pages/appMain/update-${key}`, query = {}
				if(!hasDetail) return
				if(key == 'cbf'){
					query = {
						elybCbfid: item.elybCbfid || '',
						cbfsfzhm: item.cbfsfzhm
					}
				}else if(key == 'cbdk'){
					query = {
						elybCbdkid: item.elybCbdkid || '',
						dkbm: item.dkbm,
						cbfbm: item.cbfbm
					}
				}
				uni.navigateTo({
					url: `${path}${queryParams(query)}`
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.page-container {
		min-height: 100vh;
		background-color: #f8f8f8;

		.list-container {
			padding: 24rpx 24rpx 120rpx;
			.item{
				background-color: #fff;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				padding: 20rpx 24rpx;
				.item-head{
					.label-txt{
						position: relative;
						padding-left: 14rpx;
						&:before{
							content: "";
							position: absolute;
							height: 28rpx;
							width: 4rpx;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							background-color: #16B264;
						}
						@include fontStyle(#333, 36rpx, 500);
					}
					.head-status{
						background-color: rgba(221, 97, 97, .3);
						border-radius: 8rpx;
						height: 36rpx;
						width: 100rpx;
						&.success{
							background-color: rgba(22, 178, 100, .3);
							.status-txt{
								@include fontStyle(#16B264, 24rpx, 400);
							}
						}
						.status-txt{
							@include fontStyle(#dd6161, 24rpx, 400);
						}
					}
				}
			}
			.item-cbf, .item-cbdk{
				.row{
					margin-top: 30rpx;
					.col{
						@include fontStyle(#333, 32rpx, 500);
					}
				}
			}
			.item-cbjf{
				.row{
					margin-top: 30rpx;
					.col-txt{
						@include fontStyle(#999, 24rpx, 400);
						margin-bottom: 16rpx;
					}
					.col{
						@include fontStyle(#333, 32rpx, 500);
					}
				}
			}
		}
		.bottom-btn-container{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
			.btn-item{
				height: 100rpx;
				flex: 1;
				border-top: 2rpx solid #16B264;
				&.submit-btn{
					background-color: #16B264;
					.btn-txt{
						@include fontStyle(#fff, 36rpx, 500);
					}
				}
				&.save-btn{
					background-color: #fff;
					.btn-txt{
						@include fontStyle(#16B264, 36rpx, 500);
					}
				}
			}
		}
	}
</style>
